<template>
  <el-form
    :label-width="labelWidth"
    class="pdl-15 pdr-15"
  >
    <el-row :gutter="20">
      <el-col :span="col">
        <el-form-item
          :label="label"
          :required="required"
          :style="{ marginBottom }"
        >
          <el-upload
            class="upload-demo"
            drag
            :show-file-list="false"
            :http-request="uploadFile"
            :accept="accept"
            :disabled="uploadDisabledFlag"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
          </el-upload>
          <div
            class="color-grey"
            style="width: 1000px;"
          >
            仅支持限格式为.zip,.doc,.rar,.docx,.pdf,.jpg,.jpeg,.xls,.xlsx,.png，单个文件最大50M
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item
      v-if="flag === '1'"
      v-show="fileObj.fileId || fileObjList.length"
      label=""
      :style="{ marginBottom, marginLeft }"
    >
      <FileList
        :show-close="showClose"
        :file-margin-css="fileMarginCss"
        :file-obj="fileObj"
        :file-obj-list="fileObjList"
        :is-multiple="isMultiple"
        :is-login-no="isLoginNo"
        @removeFile="removeFile"
        @removeFileItem="removeFileItem"
      />
    </el-form-item>
    <el-form-item
      v-else
      v-show="fileObj.fileId || fileObjList.length"
      label=""
      :style="{ marginBottom, marginLeft }"
    >
      <FileList
        :show-close="showClose"
        :file-margin-css="fileMarginCss"
        :file-obj="fileObj"
        :file-obj-list="fileObjList"
        :is-multiple="isMultiple"
        :is-login-no="isLoginNo"
        @removeFile="removeFile"
        @removeFileItem="removeFileItem"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import FileList from './fileList';
import { uploadFiles, deleteFile } from '@/api/fileMng.js';
export default {
	name: 'Upload',
	components: {
		FileList,
	},
	props: {
		uploadDisabledFlag: {
			type: Boolean,
			default: false,
		},
		label: {
			type: String,
			default: '',
		},
		labelWidth: {
			type: String | Number,
			default: '',
		},
		uploadObj: {
			type: Object,
			default: () => null,
		},
		flag: {
			type: String,
			default: '',
		},
		file: {
			type: Object,
			default: () => {},
		},
		fileList: {
			type: Array,
			default: () => [],
		},
		col: {
			type: Number,
			default: 12,
		},
		marginBottom: {
			type: String,
			default: '',
		},
		// 是否上传多文件
		isMultiple: {
			type: Boolean,
			default: false,
		},
		isLoginNo:{
			type: Boolean,
			default: true,
		},
		accept: {
			type: String,
			default: '.zip,.doc,.rar,.docx,.pdf,.jpg,.jpeg,.xls,.xlsx,.png'
		},
		required: {
			type: Boolean,
			default: false,
		},
		showClose: {
			type: Boolean,
			default: true,
		},
		marginLeft: {
			type: String,
			default: '',
		},
		fileMarginCss: {
			type: String,
			default: ''
		},
	},
	data() {
		return {
			fileObj: this.file || {},
			fileObjList: this.fileList || [],
		};
	},
	watch: {},
	mounted() {
	},
	methods: {
		initFileList(data) {
			this.fileObjList = data;
		},
		uploadFile(a) {
			const { file } = a;
			const { size, name } = file;
			let fileType = name.substring(name.lastIndexOf('.'));
			var fileTypeArr = ['.zip', '.doc', '.rar',  '.docx', '.pdf','.jpg','.jpeg','.xls','.xlsx','.png'];
			if (!fileTypeArr.includes(fileType)) {
				this.$message.warning('仅支持.zip,.doc,.rar,.docx,.pdf,.jpg,.jpeg,.xls,.xlsx,.png文件，请重新上传');
				return;
			}


			if (size > 1024 * 1024 * 50) {
				this.$message.warning('请上传小于50MB的文件');
				return;
			}
			const formdata = new FormData();
			formdata.append('file', file);
			formdata.append('busineesId', this.uploadObj.busineesId);
			formdata.append('busineesType', this.uploadObj.busineesType);
			formdata.append('folder', this.uploadObj.folder);
			console.log('isLoginNo:'+this.isLoginNo);
			if(this.isLoginNo){
				uploadFiles(formdata).then(res => {
					if (res.data.code == '000000') {
						this.fileObj = res.data.resultBody;
						this.fileObjList.push(res.data.resultBody);
						this.$emit(`set${this.uploadObj.busineesType}`, { busineesId: this.uploadObj.busineesId,fileList:this.fileObjList});
					}
				});
			}else{
				condType.uploadFileByNotLogin(formdata, this.uploadObj).then(res => {
					if (res.data.code == '000000') {
						this.fileObj = res.data.resultBody;
						this.fileObjList=res.data.resultBody;
						this.$emit(`set${this.uploadObj.busineesType}`, { busineesId: this.uploadObj.busineesId, fileList: this.fileObjList });

					}
				});
			}

		},
		removeFile() {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.fileObj = null;
				this.$message.success('删除成功!');
			}).catch(() => {
				this.$message.info('已取消删除');
			});

		},
		removeFileItem(index, fileId) {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				var params = new FormData();
				params.append('fileId', fileId);
				deleteFile(params).then((result) => {
					if (result.data.code !== '000000') {
						return this.$message.error('删除失败，请稍后尝试!');
					}
					this.$message.success('删除成功!');
				});
				this.fileObjList.splice(index, 1);
			}).catch(() => {
				this.$message.info('已取消删除');
			});
		},
		mustNeedValid() {
			if (this.fileObjList.length === 0) {
				return false;
			} else {
				return true;
			}
		},
	},
};
</script>
<style>
.upload-demo .el-upload {
    display: block;
}
.upload-demo .el-upload .el-upload-dragger {
    display: flex;
    justify-content: center;
    height: 65px;
    width: 100%;
    min-width: 300px;
    background-color: #ecf6ff;
    border-color: #0a8be6;
}
.upload-demo .el-upload .el-upload-dragger .el-icon-upload {
    margin: unset;
    line-height: 65px;
    color: #0a8be6;
    font-size: 43px;
    margin-right: 10px;
}
.upload-demo .el-upload .el-upload-dragger .el-upload__text {
    line-height: 65px;
}
</style>
